<style>
  .card_wrap {
    border: 1px solid #d9d9d9;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 15px;
  }

  .card_wrap .card_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 10px;
    border-bottom: 1px dashed #ccc;
  }

  .card_wrap .accepted_payment_list {
    display: flex;
  }

  .card_wrap .accepted_payment_list .accepted_payment_image {
    display: flex;
    border: 1px solid #d9d9d9;
    margin-left: 10px
  }

  .card_wrap .accepted_payment_list img {
    width: 40px;
    height: 20px;
  }

  #card {
    padding: 10px 0;
  }
</style>

<form action="{$gatewayUrl}" id="stripe—card" method="POST">
  <div class="container">

    <input type="hidden" id="name" name="name"
      value="{$shippingAddress['first_name']} {$shippingAddress['last_name']}" />

    <input type="hidden" id="address" name="address" value="{$shippingAddress['address1']}" />

    <input type="hidden" id="city" name="city" value="{$shippingAddress['city']}" />

    <input type="hidden" id="state" name="state" value="{$shippingAddress['province']}" />

    <input type="hidden" id="address_country" name="address_country"
      value="{$shippingAddress['country_code']}" />

    <input type="hidden" id="zip" name="zip" value="{$shippingAddress['zip']}" />

    <input type="hidden" id="itemno" name="itemno" value="{$this->order->order_number}" />

    <input type="hidden" id="amount" name="amount" value="{$order->total_price}" />

    <input type="hidden" id="currency_code" name="currency_code" value="{$currency_code}" />

    <input type="hidden" id="phone" name="phone" value="{$shippingAddress['phone']}" />

    <div class="card_wrap">
      <div class="card_title">
        <div>Credit Card</div>
        <div class="accepted_payment_list"></div>
      </div>
      <div id="card"></div>
    </div>

    <div id="stripe—card-button"></div>
    <div id="stripe—card-message" style="margin-top: 14px;"></div>
  </div>
</form>

<script>

  $(function () {

    function postMessagePaymentB(code, data) {
        $("")[0].contentWindow.postMessage({ type: "oemPayment", code: code, data: data }, "*");
    }

    async function postMessageCallback(event) {
      if (event.data && event.data.type && event.data.type == "threePayUrl") {
        const oemBeforePaymentResults = window["oemBeforePayment"] ? await window["oemBeforePayment"]() : true;
        if (oemBeforePaymentResults) {
          postMessagePaymentB( 200, "");
        } else {
          postMessagePaymentB(100, "");
        }
      }
    }
    window.addEventListener("message", postMessageCallback);

  })
</script>

<script language="javascript">


  // 按钮点击触发oem结账流程提交订单信息
  window.parent.postMessage({ type: "threePayUrl", code: 200, data: "" }, "*");


  function postMessageCallback(event) {
    // 回调监听oem商城窗口发送的消息
    if (event.data && event.data.type && event.data.type == "oemPayment") {
      // 200 oem商城提交订单处理完成
      if (event.data.code == 200) {
        //submit() //支付处理提交逻辑
      }
    }
  }
  window.addEventListener("message", postMessageCallback);

  $(function () {
    var imgs = $accpetPayment
    if (imgs) {
      function renderImg() {
        var html = ''
        imgs.forEach(function (item) {
          html += "<span class='accepted_payment_image'>" +
            "<img id='accepted_payment_image' src='$imgNode/statics/cart/accepted_payment_brand/" + item + ".svg'>" +
            "</span>"
        })
        $('.card_wrap .accepted_payment_list').append(html)
      }
      renderImg()
    }
    let stripe;
    let stripeCard;
    var form = document.getElementById('stripe—card');
    $.createPaymentCard({
      src: "https://js.stripe.com/v3/",
      button: "#stripe—card-button",
      form: "#stripe—card",
      async scriptSuccess({ disableButton, enabledButton }) {
        disableButton();
        stripe = Stripe('{$this->payment->interface_type_param->key}');
        const elements = stripe.elements({ locale: 'auto' });
        stripeCard = elements.create('card', {
          iconStyle: 'solid',
          style: {
            base: {
              color: '#333',
              fontWeight: 500,
              fontFamily: 'Roboto, Open Sans, Segoe UI, sans-serif',
              fontSize: '15px',
              fontSmoothing: 'antialiased',

              ':-webkit-autofill': {
                color: '#fce883',
              },
              '::placeholder': {
                color: '#797979',
              },
            },
            invalid: {
              color: '#fb1414',
            },
          },
          hidePostalCode: true
        });
        stripeCard.mount("#card");
        stripeCard.on('ready', function () {
          enabledButton();
        })
        stripeCard.on('change', function (event) {
          if (event.error) {
            $.toast({ container: "#stripe—card-message", text: event.error.message, isReplace: true })
          }
        });
      },
      async verified() {
        var name = form.querySelector('#name');
        var address1 = form.querySelector('#address');
        var city = form.querySelector('#city');
        var state = form.querySelector('#state');
        var zip = form.querySelector('#zip');
        var address_country = form.querySelector('#address_country');
        var additionalData = {
          name: name ? name.value : undefined,
          address_line1: address1 ? address1.value : undefined,
          address_city: city ? city.value : undefined,
          address_state: state ? state.value : undefined,
          address_zip: zip ? zip.value : undefined,
        };
        const result = await stripe.createToken(stripeCard, additionalData)
        if (result.token) {
          var hiddenInput = document.createElement('input');
          hiddenInput.setAttribute('type', 'hidden');
          hiddenInput.setAttribute('name', 'token');
          hiddenInput.setAttribute('value', result.token.id);
          form.appendChild(hiddenInput);
          return true

        }
        else {
          $.toast({ container: "#stripe—card-message", text: result.error.message })
          return false
        }
      },
      async submit({ showLoading, hideLoading }) {
        showLoading();
        form.submit();
      }
    })
  })
</script>


<!-- 
<script language="javascript">
  var imgs = $accpetPayment
  moi.appendLoading({ theme: 'light', container: '.container' })
  if (imgs) {
    function renderImg() {
      var html = ''
      imgs.forEach(function (item) {
        html += "<span class='accepted_payment_image'>" +
          "<img id='accepted_payment_image' src='$imgNode/statics/cart/accepted_payment_brand/" + item + ".svg'>" +
          "</span>"
      })

      $('.card_wrap .accepted_payment_list').append(html)
    }
    renderImg()
  }

  var stripe = Stripe('{$this->payment->interface_type_param->key}');
  var elements = stripe.elements({ locale: 'auto' });

  var card = elements.create('card', {
    iconStyle: 'solid',
    style: {
      base: {
        color: '#333',
        fontWeight: 500,
        fontFamily: 'Roboto, Open Sans, Segoe UI, sans-serif',
        fontSize: '15px',
        fontSmoothing: 'antialiased',

        ':-webkit-autofill': {
          color: '#fce883',
        },
        '::placeholder': {
          color: '#797979',
        },
      },
      invalid: {
        color: '#fb1414',
      },
    },
    hidePostalCode: true
  });

  card.mount("#card");
  var example = document.querySelector(".example4");

  var form = example.querySelector('form');

  var error = form.querySelector('.error');

  var errorMessage = error.querySelector('.message');

  card.on('ready', function () {
    moi.removeLoading(".container")
  })

  card.on('change', function (event) {

    if (event.error) {

      error.classList.add('visible');

      errorMessage.innerText = event.error.message;

    } else {

      // The user fixed the last error; no more errors.

      error.classList.remove('visible');

    }

  });



  form.addEventListener('submit', function (e) {
    createAjaxLoading();
    e.preventDefault();

    $(".card_btn").attr("disabled", true);

    // Show a loading screen...

    //example.classList.add('submitting');



    // Gather additional customer data we may have collected in our form.

    var name = form.querySelector('#name');

    var address1 = form.querySelector('#address');

    var city = form.querySelector('#city');

    var state = form.querySelector('#state');

    var zip = form.querySelector('#zip');

    var address_country = form.querySelector('#address_country');


    var additionalData = {

      name: name ? name.value : undefined,

      address_line1: address1 ? address1.value : undefined,

      address_city: city ? city.value : undefined,

      address_state: state ? state.value : undefined,

      address_zip: zip ? zip.value : undefined,

    };



    // Use Stripe.js to create a token. We only need to pass in one Element

    // from the Element group in order to create a token. We can also pass

    // in the additional customer data we collected in our form.

    stripe.createToken(card, additionalData).then(function (result) {

      // Stop loading!

      //example.classList.remove('submitting');
      removeAjaxLoading();
      var error = form.querySelector('.error');

      if (result.token) {

        // If we received a token, show the token ID.

        //example.classList.add('submitted');

        var hiddenInput = document.createElement('input');

        hiddenInput.setAttribute('type', 'hidden');

        hiddenInput.setAttribute('name', 'token');

        hiddenInput.setAttribute('value', result.token.id);

        form.appendChild(hiddenInput);

        form.submit();


      }
      else {
        error.classList.add('visible');
        errorMessage.innerText = result.error.message;
        $(".card_btn").attr("disabled", false);
      }

    });

  });



</script> -->